<template>
  <div class="group-list-container">
    <div class="group-list" v-if="list.length > 0">
      <van-list
        v-model="loading"
        :finished="finished"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        finished-text=""
        @load="onLoad"
        :immediate-check="false">
        <div class="item" v-for="(item,index) in list" :key="index">
          <div class="item-img" v-if="item.itemInfo.img_path && item.itemInfo.img_path.length>0">
            <!-- 小程序端用swiper -->
            <wx-swiper :circular="true" :style="{height:item.bannerHeight+'px'}" class="wx-swiper" :indicator-dots="showIndicator" indicator-color="#ebedf0" indicator-active-color="#FF4D4F" :autoplay="true">
              <wx-swiper-item v-for="(image, index) in item.itemInfo.img_path" :key="index">
                <img :src="image" @load="onImageLoad(item,$event)" :data-src="image" />
              </wx-swiper-item>
            </wx-swiper>
          </div>
          <div class="item-img" v-else>
            <img src="https://img.wifenxiao.com/h5-wfx/images/default_goods_img.jpg" alt="" width="100%">
          </div>
          <div class="item-title">{{item.title}}</div>
          <div class="item-rule" v-if="item.rule"><div class="item-ellipsis">{{item.rule}}</div></div>
          <div class="item-desc" v-if="item.desc">{{item.desc}}</div>
          <div class="item-info">
            <template v-if="item.type == 2">
              <van-button class="item-icon">数量团</van-button>
            </template>
            <template v-else>
              <van-button class="item-icon" v-if="item.aggregation_type==2">已有{{item.num}}人参团</van-button>
              <van-button class="item-icon" v-else>{{item.num}}人团</van-button>
            </template>
            <div class="item-time"><span class="icon-time"></span>{{item.start_time}} 至 {{item.end_time}}</div>
          </div>
          <div class="item-bottom">
            <div class="item-icon">拼团价：<span class="group-price" v-html="scaleGoodsPriceFn(item.price)"></span><span class="price">¥{{item.itemInfo.price}}</span></div>
            <van-button round class="item-btn" @click="JumpName('item-group',{groupId:item.id, item_id: item.item_id})">去开团<span class="icon-right"></span></van-button>
          </div>
        </div>
      </van-list>
    </div>
    <div v-else-if="not_started_group.id">
      <div class="no_start_group">
        <div class="title">
          <img src="https://img.wifenxiao.com/h5-wfx/images/groupshop/groupList-title.png">
          <div class="countDown">
            <!-- 最开始调用不了组件，发现components 字段拼错了，但是懒得删代码改用组件了 -->
            <div>开始倒计时</div>
            <div  class="time-count groupList">
              <span class="num newDay" v-if="countDownList.day >0">{{countDownList.day}}</span>
              <span class="pot day" v-if="countDownList.day >0">天</span>
              <span class="num">{{countDownList.hour}}</span>
              <span class="pot">:</span>
              <span class="num">{{countDownList.minute}}</span>
              <span class="pot">:</span>
              <span class="num">{{countDownList.second}}</span>
            </div>
          </div>
        </div>
        <div class="item-list" @click="JumpName('item-group',{groupId:not_started_group.id, item_id: not_started_group.item_id})">
          <div class="item-img">
            <img :src="not_started_group.itemInfo.img_path && not_started_group.itemInfo.img_path.length>0 ? not_started_group.itemInfo.img_path[0]:'https://img.wifenxiao.com/h5-wfx/images/default_goods_img.jpg'">
          </div>
          <div class="item-info">
            <div class="no_group_content">
              <div class="no_group_title">{{not_started_group.title}}</div>
              <div class="item-type">
                <van-button class="item-icon" v-if="not_started_group.type == 2">数量团</van-button>
                <van-button class="item-icon" v-else-if="not_started_group.aggregation_type!=2">{{not_started_group.num}}人团</van-button>
              </div>
            </div>
            <div class="item-bottom">
              <span class="gd-tip">拼团价：</span>
              <span class="group-prices" v-html="scaleGoodsPriceFn(not_started_group.price)"></span>
              <span class="price">¥{{not_started_group.itemInfo.price}}</span>
            </div>
          </div>
        </div>
        <div class="item-rule" v-if="not_started_group.rule || not_started_group.desc">
          <template v-if="not_started_group.rule">
            <div class="rule-title">活动规则</div>
            <div v-html="not_started_group.rule.replace(/\n|\r\n/g, '<br>').replace(/ /g, ' &nbsp')"></div>
          </template>
          <template v-if="not_started_group.desc">
            <div class="rule-title">商品简介</div>
            <div v-html="not_started_group.desc.replace(/\n|\r\n/g, '<br>').replace(/ /g, ' &nbsp')"></div>
          </template>

        </div>
      </div>
    </div>
    <no-data v-else-if="!not_started_group.id && list.length == 0" :noData="noData"></no-data>
    <!-- 授权弹出框 -->
    <small-login ref="smalllogin"></small-login>
  </div>
</template>

<script>
import Vue from 'vue'
import { Swipe, SwipeItem } from 'vant'

Vue.use(Swipe).use(SwipeItem)
import { groupList } from '@/api/item/activity'
import { scaleGoodsPrice } from '@/utils/index'
import { mpShare} from '@/utils/utils'
import small from '@/smallapp/small'
import SmallLogin from '@/components/SmallLogin/smallLogin'
import noData from '@/components/noData/index'
export default Vue.extend({
  components: {
    SmallLogin,
    noData
  },
  data() {
    return {
      showIndicator: true,
      // bannerHeight: 0,
      autoplay: 3000,
      current: 0,
      list: [],
      not_started_group: {}, 
      p: 0,  //页码从0开始
      loading: false,
      error: false,
      finished: false,
      noData: {
        text: '努力加载中...',
        // img: 'https://img.wifenxiao.com/h5-wfx/images/groupshop/groupList-noData.png',
        img: '',
        width: '280px',
        txtColor: '#666',
        marginTop: '0px',
        txtMarginTop: '-20px'
      },
      countDownList: {
        day: '00', // 天
        hour: '00', // 时
        minute: '00', // 分
        second: '00' // 秒
      },
      interval: null
    }
  },
  created() {
    this.init()
  },
  mounted() {
    // 小程序触底加载更多
    window.addEventListener('reachbottom', () => {
      this.onLoad()
    })
    window.addEventListener('wxshow', () => {
      if (!small.checkLogin()) {
        this.$refs.smalllogin.openSmallLoginPop()
      }
    })

    window.$$subscribe('loginReload', reload => {
      if (reload) {
        this.init()
      }
    })
  },
  methods: {
    actStart() {
      this.init()
    },
    JumpName(name, data) {
      this.$JumpName(this, name, data)
    },
    /**
       * 商品价格 整数放大
       */
    scaleGoodsPriceFn(price, className) {
      return scaleGoodsPrice(price, className)
    },
    // 小程序swiper获取图片高度
    onImageLoad(item,event){
      const imgHeight = event.detail.height
      const bannerHeight = item.bannerHeight || 0
      if(imgHeight > parseFloat(bannerHeight)){
        this.$set(item, 'bannerHeight', imgHeight)
      }
    },
     // 设置定时器做倒计时
    setIntervalTime() {
      this.interval = setInterval(() => {
        this.countDownList = this.getResidueTime(this.not_started_group.start_time)
      }, 1000)
    },
    // 获取剩余时间
    getResidueTime(end) {
      let totalSeconds = 0
      if (end) {
        const nowtime = new Date().getTime() // 当前时间 毫秒数
        if (end.indexOf('-') == -1) {
          totalSeconds = (Number(end) * 1000 - nowtime) / 1000 // 结束时间-当前时间 = 剩余多少时间
        } else {
          const endTime = Date.parse(new Date(end.replace(/-/g, '/'))) // 结束时间  毫秒数
          totalSeconds = (endTime - nowtime) / 1000 // 结束时间-当前时间 = 剩余多少时间
        }
      }
      let day = 0
      let hour = 0
      let minute = 0
      let second = 0
      if (totalSeconds > 0) {
        day = parseInt(totalSeconds / 3600 / 24) // 天
        hour = parseInt((totalSeconds / 3600) % 24) // 时
        minute = parseInt((totalSeconds / 60) % 60) // 分
        second = parseInt(totalSeconds % 60) // 秒
      } else {
        day = 0 // 天
        hour = 0 // 时
        minute = 0 // 分
        second = 0 // 秒
        clearInterval(this.interval)
        this.$emit('finish')
      }
      hour = this.addZero(hour)
      minute = this.addZero(minute)
      second = this.addZero(second)

      const residueTime = {
        day: day, // 天
        hour: hour, // 时
        minute: minute, // 分
        second: second // 秒
      }
      return residueTime
    },
    // 补齐格式不满10加0
    addZero(n) {
      return n < 10 ? '0' + n : n
    },
    init() {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 50000)
      this.p = 0
      this.loading = false
      this.finished = false
      this.list = []
      this.onLoad()
    },
    onLoad() {
      const params = {
        page: this.p
      }
      groupList(params).then((res) => {
        this.loading = false
        this.$loadingWrap.close()
        if (res.status == 1) {
          const resData = res.data
          if (this.p == 0) {
            document.title = resData.pageTitle
            this.not_started_group = resData.not_started_group
            // TODO 小程序分享
            const sid = small.globalData.shopId
            const pid = small.wxCache('global_login_info') ? small.wxCache('global_login_info').uid : '0'
            this.shareInfo = {
              title: resData.jsapi_title,
              imgUrl: resData.jsapi_img,
              shareParam: `sid=${sid}&pid=${pid}`
            }
            mpShare(true, true, '/activity/pages/groupList/index', this.shareInfo)
            if (!this.not_started_group.id && resData.list.length == 0) {
              this.noData.text = '当前暂无进行中活动哦~'
              this.noData.img = 'https://img.wifenxiao.com/h5-wfx/images/groupshop/groupList-noData.png'
            }
            if (resData.list.length == 0 && this.not_started_group.id) {
              this.setIntervalTime() // 调取倒计时
            }
          }
          if (resData.list.length > 0) {
            this.list.push(...resData.list)
            this.p++
          } else {
            this.finished = true
          }
        } else {
          this.$Error(res.msg)
        }
      })
    }
  },
  beforeDestroy() {
    window.$$unsubscribe('loginReload')
    clearInterval(this.interval) // 清除定时器
    this.interval = null
  }
})

</script>
<style lang="scss">
.group-list-container{
  .group-list {
    .price-scale{
      color:#FF4D4F;
    }
  }

  .group-prices {
    .num-font{
      font-size: 40px;
      color: #FF3134
      // font-family: DIN Alternate;
    }
    .price-scale {
      color: #FF3134;
      font-size: 28px;
      // font-family: DIN Alternate;
    }
  }
}
</style>
<style lang="scss">
@import "src/styles/mixin";
.group-list-container{
  padding:20px 0 110px;
  .group-list{
    .item{
      margin-bottom:20px;
      padding:28px 26px;
      background-color:#fff;
      .wx-swiper {
        width: 100%;
        img{
          width: 100%!important;
          height: 100%!important;
        }
      }
      .item-title{
        margin:20px 0 16px;
        @include lineClamp(28px,40px,2);
      }
      .item-desc,.item-rule{
        padding:10px 0;
        font-size:20px;
        line-height:40px;
        color:#999;
      }
      .item-rule{
        border-bottom:2px solid #F7F7F7;
      }
      .item-ellipsis{
        @include lineClamp(20px,40px,2);
      }
      .item-info{
        display:flex;
        align-items: center;
        flex-wrap: wrap;
        padding:14px 0;
        .item-icon{
          height:40px;
          margin-right:26px;
          padding:0 12px;
          border-color:#FF9D70;
          font-size:20px;
          color:#FF9D70;
          background-color:#FFF7F0;
        }
        .item-time{
          display:flex;
          align-items: center;
          margin:10px 0;
          font-size:20px;
          color:#999;
          .icon-time{
            width:20px;
            height:20px;
            margin-right:6px;
            background:url(https://img.wifenxiao.com/h5-wfx/images/public/icon_time.png) no-repeat;
            background-size:100% 100%;
          }
        }
      }
      .item-bottom{
        display:flex;
        justify-content: space-between;
        align-items: center;
        font-size:20px;
        color:#999;
        .price{
          margin-left:20px;
          text-decoration: line-through;
        }
        .item-btn{
          height:48px;
          padding:0 24px;
          border:0;
          font-size:24px;
          color:#fff;
          background: linear-gradient(270deg, #EE8355 0%, #FF4D4F 100%);
          .icon-right{
            display:inline-block;
            width:10px;
            height:18px;
            margin-left:10px;
            background:url(https://img.wifenxiao.com/h5-wfx/images/public/icon_right.png) no-repeat;
            background-size:100% 100%;
          }
        }
      }
    }
  }
}
.no_start_group {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #F4022F url('https://img.wifenxiao.com/h5-wfx/images/groupshop/groupList-bg.png') top left no-repeat; 
  background-size: 100% auto;
  .title {
    margin-top: 80px;
    margin-bottom: 48px;
    text-align: center;
    img {
      width: 576px;
      margin-bottom: 16px;
    }
    .countDown {
      color: #fff;
      font-size: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      .time-count{
        display:flex;
        align-items:center;
        span{
          font-size: 22px;
          &.num{
            background: #fff;
            color: #FF3134;
            width: 44px;
            padding: 4px 0;
            font-size: 28px!important;
            font-weight: 500;
            border-radius: 4px;
            // &.day{
            //   background: #fff;
            //   color: #FF3134;
            //   margin-left: 16px;
            //   padding: 4px 6px;
            //   width: fit-content;
            //   min-width: 44px;
            // }
            &.newDay {
              margin-left: 16px;
              padding: 4px 6px;
              width: fit-content;
              min-width: 44px;
            }
          }
          &.pot{
            margin: 0 4px;
            font-size: 24px;
            // background: #fff;
            // color: #FF3134;
            &.day{
              // margin:0 6px 0 4px;
              background: transparent;
              color: #fff;
            }
          }
        }
      }
    }
  }

  .item-rule {
    margin: 0px 24px 16px 24px;
    padding: 24px;
    color: #fff;
    font-size: 22px;
    .rule-title {
      font-size: 24px;
      margin-top: 24px;
      margin-bottom: 8px;
    }
  }
  .item-list {
    margin: 0 24px;
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    .item-img {
      margin-right: 14px;
      width: 240px;
      height: 240px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 12px;
        object-fit: cover;
      }
    }
    .item-info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      .no_group_content {
        .no_group_title {
          font-weight: 500;
          margin-bottom: 8px;
          @include lineClamp(28px,40px,2)
        }
        .item-icon{
          height:40px;
          margin-right:26px;
          padding:0 12px;
          background: rgba(255, 49, 52, 0.05);
          font-size:20px;
          color:#FF3134;
          border: 1px solid #FF3134
        }
      }
      .item-bottom{
        display:flex;
        justify-content: space-between;
        align-items: baseline;
        font-size:24px;
        color:#666;
        .gd-tip {
          line-height: 34px;
          position: relative;
          top: -4px;
        }
        .price{
          font-size: 22px;
          margin-left: 16px;
          text-decoration: line-through;
          color: #999
        }
      }
    }
  }
}
</style>
